<template>
  <div class="content-div">
    <div class="bread" :class="{ collapse: $store.state.app.isCollapsed === 'true' }">
      蟹券信息
    </div>
    <div>
      <ul class="list-filter">
        <li>
          <p>生成日期</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p>蟹券编号</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p>品种</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p style="margin-top: 25px">
            <el-button size="small" type="primary">查询</el-button>
          </p>
        </li>
      </ul>
      <div class="list-wrapper mt10">
        <p>
          <el-button type="primary" size="small" @click="edit('new')">添加蟹券信息</el-button>
        </p>
        <el-table
          header-row-class-name="table-list-header"
          row-class-name="table-list-row"
          class="mt10" :data="tableData">
          <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
          >
            <template slot-scope="scope" >
              <template v-if="item.prop === 'operation'">
                <el-link @click="edit('edit', scope.row)" type="primary">修改</el-link>
              </template>
              <template v-else-if="item.prop === 'ringId'">
                <p v-for="item in scope.row[item.prop]" :key="item">{{ item }}</p>
              </template>
              <span v-else>
                {{ scope.row[item.prop] }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="txc">
          <el-pagination
            class="mt20"
            layout="prev, pager, next"
            :total="50">
          </el-pagination>
        </div>
      </div>
    </div>
    <template>
      <EditTicket v-if="showEdit" :edit-type="editType" :row="curRow" @modal-close="handleModalClose" />
    </template>
  </div>
</template>
<script>
import EditTicket from '../components/EditTicketPro'
export default {
  components: { EditTicket },
  data () {
    return {
      columns: [
        {
          label: '蟹券编号',
          prop: 'id'
        },
        {
          label: '蟹品种',
          prop: 'type'
        },
        {
          label: '蟹扣编号',
          prop: 'ringId'
        },
        {
          label: '生成日期',
          prop: 'createTime'
        },
        {
          label: '使用日期',
          prop: 'useTime'
        },
        {
          label: '操作',
          prop: 'operation'
        }
      ],
      tableData: [
        {
          id: '20201004001',
          type: '公蟹',
          ringId: ['ring2212312321', 'ring2212312311', 'ring2212312341'],
          createTime: '2020-10-04 10:00:01',
          useTime: '2020-10-04 10:00:01'
        },
        {
          id: '20201004002',
          type: '公蟹',
          ringId: ['ring2212312321', 'ring2212312311', 'ring2212312341'],
          createTime: '2020-10-04 10:00:01',
          useTime: '2020-10-04 10:00:01'
        }
      ],
      showEdit: false,
      curRow: {},
      editType: 'new'
    }
  },
  methods: {
    goEdit () {
      this.$router.push('editBox')
    },
    edit (type, data = {}) {
      this.editType = type
      this.curRow = data
      this.showEdit = true
    },
    handleModalClose (info) {
      this.showEdit = false
      if (info.update) {}
    },
    goDetail () {
      this.$router.push('boxDetail')
    }
  }
}
</script>
<style lang="scss">

</style>
